<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 下级开户新页面 -->
<style>
.creatAccountTitle[data-v-6d28c302] {
    background: #fff;
    padding: 0 .3rem;
    font-size: .9em;
    line-height: 2.8em;
}

.switch{
   padding: 20px;
   text-align: center;
   padding-bottom: 0;
}

.switch ul{
	overflow: hidden;
}

.switch ul li.active {
    background: #059BF3;
    color: #fff;
}
.switch ul li.invitationCode {
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}
.switch ul li {
    float: left;
    width: 100px;
    padding: 0.5em 0.5em;
    border-top-left-radius: .2em;
    border: 1px solid #059BF3;
    font-size: 1em;
}

.switch ul li.openAccount {
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
    border-left: none;
}

.message {
    width: 90%;
    margin: 0 auto;
}

.message p {
    margin: .5em 0;
}

.message input {
    background: #fff;
    border: 1px solid #059bf3;
    border-radius: .3em;
    padding: .5em;
    font-size: .8em;
    width: 66%;
}

.openAgent .invitationCode,.openAgent .openAccount{
	float: left;
	width:50%;
	border:1px solid #eee;
	height: 300px;
	margin-top: 30px;
}

.openAgent{
	position: relative;
}

.openAgent .invitationCodeTitle {
    position: absolute;
    left: 160px;
    top: 20px;
    padding: 0 20px;
    background: #fffdeb;
    font-size: 14px;
    font-weight: 600;
}

.openAgent .openAccountTitle {
    position: absolute;
    left: 580px;
    top: 20px;
    padding: 0 20px;
    background: #fffdeb;
    font-size: 14px;
    font-weight: 600;
}

.TabLis{
	padding: 20px 0;
    width: 70%;
    margin: 0 auto;
}

.openAgent .submitBtn {
    margin-left: 15px;
}

#yqmCode_wrapper{
	margin-bottom: 30px;
}

.codes{
	border: 1px solid #cecece;
    border-radius: 0;
    padding: 8px;
    color: #666;
}

.invitationCode-td .codes{
	width:60px;
	text-align: center;
}

.iCode-td .codes{
	min-width: 280px;
	text-align: center;
}

.copybtn{
	color: #4aa9db;
    cursor: pointer;
    margin-left: 10px;
}

</style>
<section data-v-c2f0218a="" class="main-content subAccountNew view">
<div class="userRight">
	<div class="userTitle mgb10">下级开户</div>
	<div class="newTab">
		<a class="router-link-exact-active curr">下级开户</a>
		<a class="a-yaoqingma">邀请码管理</a>
	</div>
	<div class="userMainH openAgent mgb10">
		<div class="invitationContent">
			<span class="invitationCodeTitle">生成邀请码</span>
			<span class="openAccountTitle">为下级开户</span>
			<div class="invitationCode">
				<div data-id="1" data-title="" class="TabLis">
					<ul class="searchType">
						<li>
							<span>开户类型：</span>
							<a class="userSearch active" data-type="1">代理</a>
							<a class="userSearch" data-type="0">玩家</a> <!-- <br> 返点设置：请先为下级设置返点。
							<a class="rebateDesLink">点击查看返点赔率表</a> -->
						</li>
					</ul>
					<div class="gundong1">
						<div class="circle_bg"><img src="/img/agent/dollars.png"></div>
						<div class="seradediv">当前返点：<span>5.0%</span></div>
						<div class="User_grade" id="runway">
							<div class="el-slider">
								<div class="el-slider__runway">
									<div class="el-slider__bar" style="left: 0%; width: 0%;"></div>
									<div class="el-slider__button-wrapper" id="drag">
										<div class="el-slider__button el-tooltip"></div>
									</div>
								</div>
							</div>
						</div>
					</div>	
					<a class="submitBtn">生成邀请码</a>
				</div>
			</div>
			
			<div class="openAccount">
				<div data-id="1" data-title="" class="TabLis">
					<ul class="searchType">
						<li>
							<span>开户类型：</span>
							<a data-type="1" class="userSearch active">代理</a>
							<a data-type="0" class="userSearch">玩家</a>
						</li>
					</ul>
					
					<div class="message">
						<p><span>姓名：</span><input class="userName" placeholder="请输入用户名" /></p>
						<p><span>密码：</span><input class="userPwd" type="password" placeholder="请输入密码" /></p>
					</div>
					<div class="gundong1">
						<div class="circle_bg"><img src="/img/agent/dollars.png"></div>
						<div class="seradediv">当前返点：<span>5.0%</span></div>
						<div class="User_grade" id="runway1">
							<div class="el-slider">
								<div class="el-slider__runway">
									<div class="el-slider__bar" style="left: 0%; width: 0%;"></div>
									<div class="el-slider__button-wrapper" id="drag1">
										<div class="el-slider__button el-tooltip"></div>
									</div>
								</div>
							</div>
						</div>
					</div>	
					<a class="submitBtn">确认开户</a>
				</div>
			</div>
			
			<div class="userTip mglr30 mgb10">
				<p>※ 温馨提示：
					<br> 1、不同的返点赔率不同，返点越高赔率越高（棋牌返点越高抽佣越低）。
					<br> 2、彩票：代理可获得的佣金等于代理自身返点与下级返点的差值，如代理自身返点3，下级返点1，代理可获得下级投注金额的2%，即下级下注100元，代理可获得2元。
					<br> 3、棋牌：代理可获得的佣金等于代理自身抽佣比例与下级抽佣比例的差值，如代理自身抽佣比例8%，下级抽佣10%，代理可获得下级棋牌奖金的2%，即下级获得棋牌奖金100元，代理可获得2元。
					<br> 4、下级返点值设得越低，下级的赔率就越低，抽佣比例就越高，建议给下级设置的返点不要过低。
				</p>
			</div>
		</div>
		<div class="creatAccount hide">
			<div class="TabLi">
				<ul class="searchType">
					<li><span>开户类型：</span>
						<a  data-type="1"  class="userSearch active">代理</a>
						<a  data-type="0" class="userSearch">玩家</a>
					</li>
				</ul>
				<div class="yqmCode">
					<div class="notContent" style="padding: 100px 0px; display: none;">
						<div data-v-4167878a="" class="iconLoadingCon" style="transform: scale(0.6);"><img data-v-4167878a="" data-v-3bf35cfc="" src="https://images-na.ssl-imagess-amazon.com/Images/Common/loading.gif" alt="" class="loadingImg"></div>
					</div>
					<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="yqmCode">
						<thead>
							<tr>
								<th>邀请码</th>
								<th>邀请链接</th>
								<th>类型</th>
								<th>返点率</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<div class="userTip mg30">
						<p><i class="defFont"></i>温馨提示：“邀请码” 与 “注册链接” 功能一致，可以使用邀请码，也可以使用注册链接。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<script type="text/javascript">
	 var gradeWidth=$("#runway").offset().left;
	 var runwayWidth=$("#runway").width();
	 var gradeWidth1=$("#runway1").offset().left;
	 var runwayWidth1=$("#runway1").width();
	
		$.ajax({
			url:"/agencyCenter/highest.do", 
			type: "post",
			data:{},
			success:function(data){
				if(data == 50) { 
					save.push("sy");
					bindSetData("login"); 
					return;
	   			}else if(data==60){
	   				pagePreserve();
	   				return;
	   			}
				var newData=data.data;
				newData=Number(newData.substring(0,newData.length-1)).toFixed(1);
				$(".seradediv span").text(newData+"%");
				allRobate=newData;
				allRobate1=newData;
				gradeWidth=$("#runway").offset().left;
			 	runwayWidth=$("#runway").width();
			 	gradeWidth1=$("#runway1").offset().left;
				runwayWidth1=$("#runway1").width();
			},
		});
	
		var div1 = document.getElementById("runway");
	    var div2 = document.getElementById("drag");
	    var disX=0;
	    div2.onmousedown=fnDown;
	    function fnDown(ev)
	    {
	        var oEvent=ev||event;
	        disX=oEvent.clientX-div2.offsetLeft;
	        document.onmousemove=fnMove;
	        document.onmouseup=fnUp;
	    }
	
	    function fnMove(ev)
	    {
	        var oEvent=ev||event;
	        var width=$("#runway").width();
	        var moveWidth=oEvent.clientX-disX
	        if(moveWidth>=0 && moveWidth<=width){
	        	 div2.style.left=moveWidth+'px';
	        	 var percentage=((width-moveWidth)/width);
	        	 robate=percentage*allRobate;
	             robate=robate.toFixed(1);
	             $(".invitationCode .seradediv span").text(robate+"%");
	        }else{
	        	return;
	        }
	    }
	    function fnUp()
	    {
	        document.onmousemove=null;
	        document.onmouseup=null;
	    }
	    
	    var div3 = document.getElementById("runway1");
	    var div4 = document.getElementById("drag1");
	    var disX1=0;
	    div4.onmousedown=fnDown1;
	    function fnDown1(ev)
	    {
	        var oEvent=ev||event;
	        disX1=oEvent.clientX-div4.offsetLeft;
	        document.onmousemove=fnMove1;
	        document.onmouseup=fnUp1;
	    }
	
	    function fnMove1(ev)
	    {
	        var oEvent=ev||event;
	        var width=$("#runway1").width();
	        var moveWidth=oEvent.clientX-disX1
	        if(moveWidth>=0 && moveWidth<=width){
	        	 div4.style.left=moveWidth+'px';
	        	 var percentage=((width-moveWidth)/width);
	        	 robate=percentage*allRobate;
	             robate=robate.toFixed(1);
	             $(".openAccount .seradediv span").text(robate+"%");
	        }
	    }
	    function fnUp1()
	    {
	        document.onmousemove=null;
	        document.onmouseup=null;
	    }
    
    /* 邀请码下选择开户类型 */
   	$(".invitationCode .searchType a").on("click",function(){
   		$(this).addClass("active");
   		$(this).siblings().removeClass("active");
   		var dataType=$(this).attr("dataType");
   	})
   	
   	/* 下级用户选择开户类型 */
   	$(".openAccount .searchType a").on("click",function(){
   		$(this).addClass("active");
   		$(this).siblings().removeClass("active");
   	})
   	
   		/* 点击生成邀请码 */
		$(".invitationCode .submitBtn").on("click",function(){
			var type=$(".invitationCode .searchType .active").attr("data-type");
			var robate=$(".invitationCode .seradediv span").text();
			$.ajax({
				url:"/agencyCenter/insertProxyLinks.do", 
				type: "post",
				data:{
					odds:robate,
					gamePlayer:type,
				},
				success:function(data){
					if(data.data==1){
						layer.confirm('生成成功，是否查看？', {
				            btn : [ '确定', '取消' ]
				        }, function(index) {
				            layer.close(index);
				            $(".a-yaoqingma").addClass("curr");
				    		$(".router-link-exact-active").removeClass("curr");
				    		$(".invitationContent").addClass("hide");
				    		$(".creatAccount").removeClass("hide");
				    		if(type==0){
				    			$(".creatAccount .searchType a").eq(1).addClass("active")
				    			$(".creatAccount .searchType a").eq(0).removeClass("active")
				    		}else if(type==1){
				    			$(".creatAccount .searchType a").eq(0).addClass("active")
				    			$(".creatAccount .searchType a").eq(1).removeClass("active")
				    		}
							$("#yqmCode").DataTable().destroy();
							invitationType(type)
				        });
					}else if(data.data==2){
						layer.alert("赔率设置有误,请重新选择赔率")
					}else if(data.data==3){
						layer.alert("赔率大于平台规定的最低赔率")
					}else if(data.data==4){
						layer.alert("试玩账号不能申请成为代理")
					}else if(data.data==5){
						layer.alert("很抱歉，您已经被上级设置成玩家账号不能成为代理")
					}else if(data.data==6){
						layer.alert("信息不能为空")
					}
				},
			}); 
		});
    
    
   	/*确认开户 */
	$(".openAccount .submitBtn").on("click",function(){
		var type=$(".openAccount .searchType .active").attr("data-type");
		var robate=$(".openAccount .seradediv span").text();
		var userName=$(".openAccount .userName").val();
		var password=$(".openAccount .userPwd").val();
		if(userName=="" || password==""){
			return;
		}
		$.ajax({
			url:"/agencyCenter/openAccount.do", 
			type: "post",
			data:{
				oddss:robate,
				gamePlayer:type,
				name:userName,
				pass:password,
			},
			success:function(data){
				if(data.data==1){
					layer.confirm('开户成功，是否查看下级？', {
			            btn : [ '确定', '取消' ]
			        }, function(index) {
			            layer.close(index);
			            page="subManageNew";
			        	window.location.href="/pc/personal.do#"+page
			        });
				}else if(data.data==2){
					layer.alert("赔率设置有误,请重新选择赔率")
				}else if(data.data==3){
					layer.alert("赔率大于平台规定的最低赔率")
				}else if(data.data==4){
					layer.alert("试玩账号不能申请成为代理")
				}else if(data.data==5){
					layer.alert("很抱歉，您已经被上级设置成玩家账号不能成为代理")
				}else if(data.data==6){
					layer.alert("该用户名已经在,请更换用户名")
				}else if(data.data==7){
					layer.alert(" 已经是玩家账号不能成为代理")
				}
			},
		}); 
	});
	invitationType(1)
	
	/* 下级开户和邀请码管理的切换 */
	$(".newTab a").on("click",function(){
		$(this).addClass("curr");
		$(this).siblings().removeClass("curr");
		if($(this).hasClass("router-link-exact-active")){
			$(".invitationContent").removeClass("hide");
			$(".creatAccount").addClass("hide")
		}else{
			$(".invitationContent").addClass("hide");
			$(".creatAccount").removeClass("hide")
		}
	})
	
	
	
	/* 根据邀请码的开户类型显示邀请码链接数据 */
	function invitationType(type){
			 $("#yqmCode").DataTable({
			    "bLengthChange": true,      
			    "bSort": false,
			    "bAutoWidth": false,
			    'aLengthMenu':[5],
			     "searching": false,
			     "dom": `ftp`,
			     "language": {
			          "lengthMenu": "每页显示 _MENU_ 条记录",     
			          "zeroRecords": "没有检索到数据",     
			          "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
			          "info": "没有数据",     
			          "oPaginate": {     
			              "sFirst": "首页",     
			              "sPrevious": "前一页",     
			              "sNext": "后一页",     
			              "sLast": "尾页"    
			        	},
			          "search":"搜索:",
			          "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
			          "infoEmpty":      "没有找到匹配的信息",
			       },
			       "columnDefs": [{"defaultContent": "",
		               "targets": "_all"}],
			       "ajax": {
			      	 "type": "POST",
			      	 "url":"/agencyCenter/pueryProxyLinks.do",
			      	"data": function ( d ) {
				        d.gamePlayer = type;
		   		    },
			      	 "dataSrc": function(json) {
			      		 newData = json.data;
			      			for(i=0;i<newData.length;i++){
				      			 var item=newData[i];
				      			item.invitationCode='<input type="text" class="codes" value='+item.invitationCode+'><span class="copybtn" id="copy_iCode'+i+'" onclick="copyContent(\'#copy_iCode'+i+'\')">复制</span>';
				      			item.iCode='<input type="text" class="codes" value='+item.iCode+'><span class="copybtn" id="copy_address'+i+'" onclick="copyContent(\'#copy_address'+i+'\')">复制</span>';
				      			if(item.gamePlayer==0){
				      				item.gamePlayer="玩家";
				      			}else if(item.gamePlayer==1){
				      				item.gamePlayer="代理";
				      			}
				      			item.inferiorOdds=(Number(item.inferiorOdds)*100).toFixed(1)+"%";
			      		 }
			      			 return newData;
			      	 },
			       },
			       "columns": [
			           { "data": "invitationCode","className":"invitationCode-td"},
			           { "data": "iCode","className":"iCode-td"},
			           { "data": "gamePlayer","className":"gamePlayer-td"},
			           { "data": "inferiorOdds","className":"inferiorOdds-td"},
			           { "data": null, "defaultContent": "<button class='btn btn-default'>删除</button>"},
		           ] 
			 	});
			};
			/* 邀请码管理的开户类型切换 */
			$(".creatAccount .searchType a").on("click",function(){
				$(this).addClass("active");
				$(this).siblings().removeClass("active");
				var type=$(this).attr("data-type");
				$("#yqmCode").DataTable().destroy();
				invitationType(type)
			})
    

		/* 删除邀请码 */
		$("#yqmCode").on("click",".btn-default",function(){
			var that=this;
			layer.confirm('您确定要删除邀请码吗？', {
	            btn : [ '确定', '取消' ]
	        }, function(index) {
	            layer.close(index);
	            var yqCode=$(that).parents("tr").find(".invitationCode-td input").val();
				$.ajax({
					url:"/agencyCenter/deleteAgenLink.do", 
					type: "post",
					data:{invitationCode:yqCode},
					success:function(data){
						if(data.data==1){
							 $("#yqmCode").DataTable().ajax.reload();
						}else{
							layer.alert("删除失败")
						}
					},
				}); 
	        }); 
		});
			
		/* 复制链接 */
	    function copyContent(nameId){
			console.log(nameId)
	         layer.msg("复制成功"); 
	    	   var clipboard = new ClipboardJS(nameId,{
	    		   text: function() {
			               return $(nameId).prev().val();
			           }
	    	   }); 
		       clipboard.on('success', function(e) {      
		           e.clearSelection();      
		       });
	    };

	
</script>
